@charset "UTF-8";

.clrs-cool {
  --navy: #001F3F;
  --blue: #0074D9;
  --aqua: #7FDBFF;
  --teal: #39CCCC;
  --olive: #3D9970;
  --green: #2ECC40;
  --lime: #01FF70;
}

.clrs-warm {
  --yellow: #FFDC00;
  --orange: #FF851B;
  --red: #FF4136;
  --fuchsia: #F012BE;
  --purple: #B10DC9;
  --maroon: #85144B;
}

.clrs-grayscale {
  --black: #111111;
  --gray: #AAAAAA;
  --silver: #DDDDDD;
  --white: #FFFFFF;
}

.clrs-palette {
  --dark-red: #e7040f;
  --red: #ff4136;
  --light-red: #ff725c;
  --orange: #ff6300;
  --gold: #ffb700;
  --yellow: #ffde37;
  --light-yellow: #fbf1a9;
  --purple: #5e2ca5;
  --light-purple: #a463f2;
  --dark-pink: #d5008f;
  --hot-pink: #ff41b4;
  --pink: #ff80cc;
  --light-pink: #ffa3d7;
  --dark-green: #137752;
  --green: #19a974;
  --light-green: #9eebcf;
  --navy: #001b44;
  --dark-blue: #00449e;
  --blue: #357edd;
  --light-blue: #96ccff;
  --lightest-blue: #cdecff;
  --washed-blue: #f6fffe;
  --washed-green: #e8fdf5;
  --washed-yellow: #fffceb;
  --washed-red: #ffdfdf;
}

body { background-color: #ddd; }

main {
  font-size: 1.25rem;
  display: table;
  table-layout: fixed;
  width: 100%;
}


table {
  box-sizing: border-box;
  border-spacing: 0;
  padding: 0;
  width: 100%;
}

td {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: rgba(0,0,0,.05);
  display: table-cell;
  vertical-align: middle;
}

td:first-child { padding: 2rem; }

td:nth-child(2) {
  padding-left: 2rem;
  padding-right: 2rem;
}

.bg-dark-red { background-color: var(--dark-red); }
.bg-red { background-color: var(--red); }
.bg-orange { background-color: var(--orange); }
.bg-gold { background-color: var(--gold); }
.bg-yellow { background-color: var(--yellow); }
.bg-purple { background-color: var(--purple); }
.bg-light-purple { background-color: var(--light-purple); }
.bg-hot-pink { background-color:  var(--hot-pink); }
.bg-dark-pink { background-color: var(--dark-pink); }
.bg-pink { background-color: var(--pink); }
.bg-dark-green { background-color: var(--dark-green); }
.bg-light-green { background-color: var(--light-green); }
.bg-green { background-color: var(--green); }
.bg-navy { background-color: var(--navy); }
.bg-dark-blue { background-color: var(--dark-blue); }
.bg-blue { background-color: var(--blue); }
.bg-light-blue { background-color: var(--light-blue); }
.bg-lightest-blue { background-color: var(--lightest-blue); }
.bg-washed-blue { background-color: var(--washed-blue); }
.bg-washed-green { background-color: var(--washed-green); }
.bg-washed-yellow { background-color: var(--washed-yellow); }
.bg-washed-red { background-color: var(--washed-red); }
.bg-light-pink { background-color: var(--light-pink); }
.bg-light-yellow { background-color: var(--light-yellow); }
.bg-light-red { background-color: var(--light-red); }
.bg-aqua { background-color: var(--aqua); }
.bg-teal { background-color: var(--teal); }
.bg-olive { background-color: var(--olive); }
.bg-lime { background-color: var(--lime); }
.bg-fuchsia { background-color: var(--fuchsia); }
.bg-maroon { background-color: var(--maroon); }
.bg-black { background-color: var(--black); }
.bg-gray { background-color: var(--gray); }
.bg-silver { background-color: var(--silver); }
.bg-white { background-color: var(--white); }


.dark-red { color: var(--dark-red); }
.red { color: var(--red); }
.orange { color: var(--orange); }
.gold { color: var(--gold); }
.yellow { color: var(--yellow); }
.purple { color: var(--purple); }
.light-purple { color: var(--light-purple); }
.hot-pink { color:  var(--hot-pink); }
.dark-pink { color: var(--dark-pink); }
.pink { color: var(--pink); }
.dark-green { color: var(--dark-green); }
.light-green { color: var(--light-green); }
.green { color: var(--green); }
.navy { color: var(--navy); }
.dark-blue { color: var(--dark-blue); }
.blue { color: var(--blue); }
.light-blue { color: var(--light-blue); }
.lightest-blue { color: var(--lightest-blue); }
.washed-blue { color: var(--washed-blue); }
.washed-green { color: var(--washed-green); }
.washed-yellow { color: var(--washed-yellow); }
.washed-red { color: var(--washed-red); }
.light-pink { color: var(--light-pink); }
.light-yellow { color: var(--light-yellow); }
.light-red { color: var(--light-red); }
.aqua { color: var(--aqua); }
.teal { color: var(--teal); }
.olive { color: var(--olive); }
.lime { color: var(--lime); }
.fuchsia { color: var(--fuchsia); }
.maroon { color: var(--maroon); }
.black { color: var(--black); }
.gray { color: var(--gray); }
.silver { color: var(--silver); }
.white { color: var(--white); }
